<template>
  <div class="login-main">
    <div class="login-head">
      <div class="row video-main">
        <div class="col-lg-12 col-md-12">
          <video class="head-video" src="http://cd.ray-live.cn/video/WuKong1.mp4" poster="" autoplay="" loop="" muted=""></video>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6 login-form-main">
          <div class="col-lg-3 col-md-3 login-logo">
            <img src="/src/assets/images/login_logo.png" alt="image">
          </div>
          <div class="login-form">
            <h2>登录</h2>
            <form>
              <div class="form_input">
                <el-input class="login_input" v-model="uname" placeholder="请输入用户名" />
              </div>
              <div class="form_input">
                <el-input class="login_input" v-model="pwd" type="password" placeholder="请输入密码" />
              </div>
              <button type="button" class="default-btn" @click="doLogin">登录</button>
              <div class="or-text"><span></span></div>
              <button type="button" class="google-btn" @click="backPassword">找回密码</button>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'
import {ElMessage} from 'element-plus'

import LoginUser from "@/stores/LoginUser.js";
import router from "@/router/index.js";

let uname = ref("test")
let pwd = ref("123")

function doLogin(){
  let url = "/javasmlogin";
  let param = {
    "uname":uname.value,
    "pwd":pwd.value
  }
  axios.post(url,param).then(result=>{
    console.log(result)
    if (result.code === 200){

     let loginuser= result.data.principal.adminUser;
      LoginUser().userModel  = loginuser;
      ElMessage.success("登录成功")
      router.push("/")
    }else {
      ElMessage.error(result.msg)
    }

  })
}

onMounted(() => {
});
</script>

<style scoped>
.form_input{
  margin-top: 20px;
  margin-bottom: 20px;
}
.login_input{
  height: 47px;

}
.login-head {
  height: 490px;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.login-head video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%; /* 保证视频宽度至少为 100% */
  min-height: 100%; /* 保证视频高度至少为 100% */
  width: auto;
  height: auto;
  z-index: -100;
  object-fit: cover;
}

.login-main {
  height: 100%;
  width: 99.9%;
  max-width: 1920px;
  min-height: 99vh;
  min-width: 1320px;
  max-height: 100%;
  position: absolute;
  z-index: -2;
  scrollbar-width: none;
  overflow: hidden;
}

.login-main .container {
  /*position: absolute;*/
  float: left;
  top: 10px;
  margin-top: 0px;
  z-index: 2;
  height: 690px;
}
.login-form-main{

  margin-top: 100px;
}
.login-logo{
  margin-left: 10px;
}
.login-form{
  right: 50px;
  top: 50px;
  position: absolute;
  width: 660px;
  background: rgba(255,255,255,0.5);
}


/* 针对 WebKit 浏览器 */
::-webkit-scrollbar {
  display: none;
}
</style>